import React from 'react'
import {Modal, Button, Input, Select} from 'antd';

// import '../../assets/css/home/recharge.less'
import Utils from "../../common/Utils";
import App from "../../common/App";

const Option = Select.Option;
const id_div = 'div-dialog-reallot';

  
export class Allot extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            alloter: '',
            user: this.props.user // 获取订单ID
        };
        this.timeout = null;
    }

    componentDidMount(){
        this.valueList()
    }

    componentWillUnmount(){
        this.timeout&&clearInterval(this.timer);
    }

    // 获取当前匹配的所有工匠名称
    valueList = (value, callback) => {
        let timeout = this.timeout;
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        let currentValue = value;
      
        App.api('adm/xxx',).then((d) => {
            if (currentValue === value) {
                const result = d.result;
                const data = [];
                result.forEach((r) => {
                  data.push({
                    value: r[0],
                    text: r[0],
                  });
                });
                callback(data);
              }
        })
      
        timeout = setTimeout(this.valueList(), 300);
    }

    // 取消
    close = () => {
        Utils.common.closeModalContainer(id_div);
    };

    // 确定 提交
    recharge = () => {
        let {alloter, user} = {...this.state};
        App.api('adm/user/update_name', {alloter: alloter}).then(() => {
            this.close();
            this.props.realloter(user, '施工中');
        })
    };

    // 选择
    handleChange = (value) => {
        this.setState({ value });
        this.valueList(value, data => this.setState({ data }));
    }

    render() {
        let {alloter} = {...this.state};
        const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
        return (
            <Modal
                getContainer={() => Utils.common.createModalContainer(id_div)}
                visible={true}
                title="分配工匠"
                width='430px'
                onCancel={() => this.close(id_div)}
                footer={null}>
                <div className='dialog-recharge'>
                    <div className='line'>
                        <div className="title">工匠人员：</div>
                        <Select
                            mode="combobox"
                            value={alloter}
                            placeholder={'请输入'}
                            style={{width: '200px'}}
                            defaultActiveFirstOption={false}
                            showArrow={false}
                            filterOption={false}
                            onChange={this.handleChange}
                        >
                            {options}
                        </Select>
                    </div>

                    <div className='btns'>
                        <Button onClick={() => {
                            this.close();
                        }}>取消</Button>

                        <Button type='primary' onClick={() => {
                            this.recharge();
                        }}>确定</Button>
                    </div>

                </div>

            </Modal>)
    }

}
